<template>
    <el-table :data="data" style="width: 100%">
        <el-table-column type="selection" width="55" header-align="center" v-if="config.isSelection" align="center" />
        <el-table-column type="index" label="序号" header-align="center" width="55" v-if="config.isList" />
        <el-table-column header-align="center" align="center" :min-width="item.colWidth"
            v-for="(item, index) in setHeader" :show-overflow-tooltip="item.key != 'roleMenuSimpleList'" :key="index" :prop="item.key">
            <template #header>
                <span>{{ item.title }}</span>
            </template>
            <template #default="scope">
                <template v-if="item.key === 'operate'">
                    <div class="operate">
                        <div v-for="(val, key) in item.buttons" :key="key">
                            <el-tooltip v-if="val.content" :content="val.content" effect="dark" placement="top">
                                <el-icon v-if="val.icon === 'Edit'">
                                    <EditPen />
                                </el-icon>
                                <el-icon v-else-if="val.icon === 'Open'"><el-switch /></el-icon>
                                <el-icon v-if="val.icon === 'Delete'">
                                    <Delete />
                                </el-icon>
                            </el-tooltip>

                            <el-icon v-if="val.icon === 'Edit'">
                                <EditPen @click="handleAction(val.command, scope.row.id)" />
                                <!-- <Checked @click="handleAction(val.command, scope.row.id)" /> -->
                            </el-icon>
                            <el-icon v-else-if="val.icon === 'Open'">
                                <template v-if="val.type == '0'">
                                    <Open v-if="scope.row.status === 1" color="#2158F3"
                                        @click="handleAction(val.command, scope.row.id, '0')" />
                                    <TurnOff v-if="scope.row.status === 0"
                                        @click="handleAction(val.command, scope.row.id, '1')" />
                                </template>
                                <FolderDelete v-if="val.type == '1'" @click="handleAction(val.command, scope.row.id)" />
                            </el-icon>
                            <el-icon v-else-if="val.icon === 'Delete'">
                                <Delete @click="handleAction(val.command, scope.row)" />
                            </el-icon>
                            <el-icon v-else-if="val.icon === 'EditPen'">
                                <Checked @click="handleAction(val.command, scope.row.id)" />
                            </el-icon>
                        </div>
                    </div>
                </template>

                <template v-else-if="item.key === 'operateBut'">
                    <div class="operate">
                        <div v-for="(val, key) in item.buttons" :key="key">
                            <el-tooltip v-if="isShow(scope.row,val)" :content="val.content" effect="dark" placement="top">
                                <el-icon v-if="val.icon === 'Edit'">
                                <EditPen @click="handleAction(val.command, scope.row.id)" />
                                <!-- <Checked @click="handleAction(val.command, scope.row.id)" /> -->
                                </el-icon>
                                <el-icon v-else-if="val.icon === 'Open'">
                                    <template v-if="val.type == '0'">
                                        <Open v-if="scope.row.status === 1" color="#2158F3"
                                            @click="handleAction(val.command, scope.row.id, '0')" />
                                        <TurnOff v-if="scope.row.status === 0"
                                            @click="handleAction(val.command, scope.row.id, '1')" />
                                    </template>
                                    <FolderDelete v-if="val.type == '1'" @click="handleAction(val.command, scope.row.id)" />
                                </el-icon>
                                <el-icon v-else-if="val.icon === 'TurnOff'">
                                    <FolderDelete @click="handleAction(val.command, scope.row.id)" />
                                </el-icon>
                                <el-icon v-else-if="val.icon === 'Delete'">
                                    <Delete @click="handleAction(val.command, scope.row)" />
                                </el-icon>
                                <el-icon v-else-if="val.icon === 'EditPen'">
                                    <Checked @click="handleAction(val.command, scope.row.id)" />
                                </el-icon>
                            </el-tooltip>
                        </div>
                    </div>
                </template>
                <template v-else-if="item.key === 'roleId'">
                    <!-- {{scope.row.roleId}} -->
                    {{ formatCity('roleId', scope.row.roleId) }}
                </template>
                <template v-else-if="item.key === 'userType'">
                    {{ formatCity('userType', scope.row.userType) }}
                </template>
                <template v-else-if="item.key === 'mobile'">
                    <template v-if="(scope.row.mobile)?.length == '11'">{{ checkHidePhone(scope.row.mobile)
                        }}</template>
                    <template v-else>--</template>
                </template>
                <template v-else-if="item.key === 'createTime'">
                    <!-- {{scope.row.createTime}} -->
                    {{ (scope.row.createTime)?.toString().substring(0, 10) }}
                </template>
                <template v-else-if="item.key === 'updateTime'">
                    <!-- {{scope.row.createTime}} -->
                    {{ (scope.row.updateTime)?.toString().substring(0, 10) }}
                </template>
                <template v-else-if="item.key === 'startTime'">
                    <!-- {{scope.row.createTime}} -->
                    {{ (scope.row.startTime)?.toString().substring(0, 10) }}
                </template>
                <template v-else-if="item.key === 'examineTime'">
                    <!-- {{scope.row.createTime}} -->
                    {{ (scope.row.examineTime)?.toString().substring(0, 10) }}
                </template>
                <template v-else-if="item.key === 'mainBusiness'">
                    <template v-if="scope.row.mainBusiness == '5'">货代</template>
                    <template v-if="scope.row.mainBusiness == '10'">租箱</template>
                    <template v-if="scope.row.mainBusiness == '15'">箱贸易</template>
                    <template v-if="scope.row.mainBusiness == '20'">集卡车队</template>
                    <template v-if="scope.row.mainBusiness == '25'">堆场</template>
                </template>
                <!-- 5-待审核 10-已通过 15-已驳回 20-已过期 -->
                <template v-else-if="item.key === 'examineStatus'">
                    <span v-if="scope.row.examineStatus === 5" class="status2">待审核</span>
                    <span v-else-if="scope.row.examineStatus === 10" class="status1">已通过</span>
                    <span v-else-if="scope.row.examineStatus === 15" class="status2">已驳回</span>
                    <span v-else-if="scope.row.examineStatus === 20" class="status2">已过期</span>
                    <span v-else> -- </span>
                </template>
                <template v-else-if="item.key === 'periodValidity'">
                    <span class="period">{{ scope.row.examineStartTime?.toString().substring(0, 10) || '--' }}</span>
                    <span class="period">~</span>
                    <span class="period">{{ scope.row.examineEndTime?.toString().substring(0, 10) || '--' }}</span>
                </template>
                <template v-else-if="item.key === 'status'">
                    <span v-if="scope.row.status === 1" class="status1">启用</span>
                    <span v-else-if="scope.row.status === 0" class="status2">停用</span>
                </template>
                <template v-else-if="item.key === 'roleMenuSimpleList'" class="ssss">
                    <div class="listRl">
                        <template v-for="(item, index) in scope.row.roleMenuSimpleList" :key="index">
                                <template v-if="index === scope.row.roleMenuSimpleList.length - 1">{{ item.name }}</template>
                                <template v-else>{{ item.name }}、</template>
                        </template>
                    </div>    
                </template>
                <template v-else>{{ scope.row[item.key] || '--' }}</template>
            </template>

        </el-table-column>
        <template #empty>
            <el-empty description="暂无数据" />
        </template>
    </el-table>
    <!--分页功能  -->
    <div class="pagination-block">
        <el-pagination v-if="config.isPagination" v-model:current-page="param.page.pageNum"
            v-model:page-size="param.page.pageSize" :page-sizes="[10, 20, 50, 100]" :disabled="disabled"
            :background="background" layout="total, sizes, prev, pager, next, jumper" :total="config.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" background :pager-count="5"
            size="small" style="float: right;" />
    </div>
</template>

<script setup long="ts">
import { defineComponent, ref, reactive, onMounted, watch } from "vue";
import { ElTable } from "element-plus";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const emit = defineEmits(['handleAction', 'handleSwitch'])
const statusValue = ref(true)
// const from = reactive({
//     roleList:{
//         type: Array,
//         default: () => [],
//     }
// })
const props = defineProps({
    // 表头内容
    header: {
        type: Array,
        default: () => [],
    },
    // 列表内容
    data: {
        type: Array,
        default: () => [],
    },
    // 配置项
    config: {
        type: Object,
        default: () => { },
    },
    rolePermissionList: {
        type: Array,
        default: () => []
    }
})
const param = reactive({
    roleIdList: [
        { label: '货代', value: '5' },
        { label: '箱东', value: '10' },
        { label: '箱贸易', value: '15' },
        { label: '集卡车队', value: '20' },
        { label: '堆场企业', value: '25' }
    ],
    userTypeList: [
        { value: 1, label: '超级管理员' },
        { value: 2, label: '系统管理员' },
        { value: 3, label: '普通用户' },
        { value: 4, label: '未实名认证' }
    ],
    page: {
        pageNum: 1,
        pageSize: 10
    }

})
// 过滤表头数据
const setHeader = computed(() => {
    return props.header.filter((v) => v.isCheck);
});
// 格式化 角色/账号类型 信息
const formatCity = (type, val) => {
    let formatString = ""
    if (val && type === "roleId") {
        const rolSArr = val.split(",")
        props.rolePermissionList.forEach((item, index) => {
            if (rolSArr.includes(item.id.toString())) {
                formatString = item.name + "/" + formatString
            }
        })
    } else if (val && type === "userType") {
        const userType = val.toString().split(",")
        param.userTypeList.forEach((item, index) => {
            if (userType.includes(item.value.toString())) {
                formatString = item.label + "/" + formatString
            }
        })
    }
    if (formatString) {
        return formatString.substring(0, formatString.length - 1);
    } else {
        return '--'
    }
}
//操作是否显示
const isShow=(row,val)=>{
    if(val?.isShow){
        return row
    }else{
        return row.examineStatus==5
    }
}
// 隐藏手机号
const checkHidePhone = (phone) => {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};
const handleAction = (command, row, val) => {
    // console.log(command,row,val)
    if (!command) return;
    emit(command, row, val);
};

// 分页相关
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    param.page.pageSize = val
    emit('pageChange', param.page)
}
const handleCurrentChange = (val) => { // 左右翻页控制键
    console.log(`1111: ${val}`)
    console.log(param.page)
    param.page.pageNum = val
    emit('pageChange', param.page)
}
</script>
<style lang="scss" scoped>
* {
    // font-weight: 600;
}

.operate {
    float: right;
    width: 100%;
    display: flex;

    div {
        flex: 1;
        cursor: pointer
    }
}

.status1 {
    color: #21790d;
}

.status2 {
    color: #ff0000;
}

.pagination-block {
    margin-top: 30px;
}

// .period {
//     display: block;
// }
.listRl{
     overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;

}
</style>